<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="./layui-v2.5.6/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./swiper/swiper.min.css">
    <title>首页</title>

</head>

<body>
    <!-- 顶部网页 -->
    <div class="header">
        <div class="nav">
            <div class="logo"><img src="img/摄影资源logo.png" alt=""></div>
            <div class="nav-item">
                <ul>
                    <li class="item red">
                        <a class="hongse" href="index.html">首页</a>
                        <div class="line"></div>
                    </li>
                    <li class="item">
                        <a class="text" href="photos.html">样片大宴</a>
                        <div class="line"></div>
                    </li>
                    <li class="item">
                        <a class="text" href="preference.html">当季优惠</a>
                        <div class="line"></div>
                    </li>
                    <li class="item">
                        <a class="text" href="city.html">旅拍城市</a>
                        <div class="line"></div>
                    </li>
                    <li class="item">
                        <a class="text" href="about.html">关于我们</a>
                        <div class="line"></div>
                    </li>
                    <li class="item mar">
                        <a class="text" href="contact.html">联系我们</a>
                        <div class="line"></div>
                    </li>
                </ul>
            </div>
            <div class="zuo">
                <img src="img/箭头左.png" alt="">
            </div>
            <div class="you">
                <img src="img/箭头右.png" alt="">
            </div>
        </div>
        <div class="banner"></div>
    </div>
    <!-- 顶部手机 -->
    <div class="header-m">
        <div class="nav">
            <div class="logo"><img src="img/摄影资源logo.png" alt=""></div>
        </div>
        <div class="kong"></div>
        <div class="icon">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="show">
            <div class="show-item"><a href="./01移动端-不凡科技官网(5页)/index.html">不凡科技</a></div>
            <div class="show-item"><a href="./index.html">首页</a></div>
            <div class="show-item"><a href="./photos.html">样片大宴</a></div>
            <div class="show-item"><a href="./preference.html">当季优惠</a></div>
            <div class="show-item"><a href="./city.html">旅拍城市</a></div>
            <div class="show-item"><a href="./about.html">关于我们</a></div>
            <div class="show-item"><a href="./contact.html">联系我们</a></div>
        </div>
    </div>
    <!-- banner网页 -->
    <div class="banner">
        <div class="layui-carousel" id="test2">
            <div carousel-item>
                <div><img src="./img/2行1.png" alt=""></div>
                <div><img src="./img/2行2.png" alt=""></div>
                <div><img src="./img/2行3.png" alt=""></div>
                <div><img src="./img/2行4.png" alt=""></div>
            </div>
        </div>
    </div>
    <!-- banner手机 -->
    <div class="banner-m">
        <div class="layui-carousel" id="test1">
            <div carousel-item>
                <div><img src="./img/2行1.png" alt=""></div>
                <div><img src="./img/2行2.png" alt=""></div>
                <div><img src="./img/2行3.png" alt=""></div>
                <div><img src="./img/2行4.png" alt=""></div>
            </div>
        </div>
    </div>
    <!-- 作品展示网页 -->
    <div class="works">
        <div class="title">
            <div class="ename">
                <div class="line1"></div>
                Exhibittion of works
                <div class="line2"></div>
            </div>
            <div class="cname">作品展示</div>
        </div>
        <div class="up">
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图1.png" alt="">
            </div>
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图2.png" alt="">
            </div>
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图3.png" alt="">
            </div>
            <div class="up-item mar">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图4.png" alt="">
            </div>
        </div>
        <div class="up">
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行1.png" alt="">
            </div>
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行2.png" alt="">
            </div>
            <div class="up-item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行3.png" alt="">
            </div>
            <div class="up-item mar">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行4.png" alt="">
            </div>
        </div>
    </div>
    <!-- 作品展示手机 -->
    <div class="works-m">
        <div class="title">
            <div class="ename">
                <div class="line1 line"></div>
                Exhibittion of works
                <div class="line2 line"></div>
            </div>
            <div class="cname">作品展示</div>
        </div>
        <div class="works-item">
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图1.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图2.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图3.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/图4.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行1.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行2.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行3.png" alt="">
            </div>
            <div class="item">
                <div class="zhezhao">
                    <div class="fangkuang"></div>
                    <h4>Xiao Ru & Grady</h4>
                    <p>2018.6.25</p>
                </div>
                <img src="img/2行4.png" alt="">
            </div>
        </div>


    </div>
    <div class="view">
        VIEW MORE
    </div>
    <!-- 优惠福利网页 -->
    <div class="welfare">
        <div class="title">
            <div class="ename">
                <div class="line1"></div>
                Welfare
                <div class="line2"></div>
            </div>
            <div class="cname">优惠福利</div>
        </div>
        <div class="tuji clear">
            <div class="one">
                <div class="sekuai">
                    <div class="title">国庆特惠</div>
                    <p class="price">7288元/套</p>
                </div>
            </div>
            <div class="two">
                <div class="sekuai">
                    <div class="title">情侣特惠</div>
                    <p class="price">5520元/套</p>
                </div>
            </div>
            <div class="three">
                <div class="sekuai">
                    <div class="title">闺密套餐</div>
                    <p class="price">6250元/套</p>
                </div>
            </div>
            <div class="four">
                <div class="sekuai">
                    <div class="title">个人福利</div>
                    <p class="price">3230元/套</p>
                </div>
            </div>
        </div>
        <div class="shuxian"></div>
        <div class="diyi"></div>
        <div class="dier"></div>
        <div class="disan"></div>
        <div class="disi"></div>
    </div>
    <!-- 优惠福利手机 -->
    <div class="welfare-m">
        <div class="title">
            <div class="ename">
                <div class="line1 line"></div>
                <p>Welfare</p>
                <div class="line2 line"></div>
            </div>
            <h3 class="cname">优惠福利</h3>
        </div>
        <div class="imgtotal">
            <div class="item">
                <img src="../img/国庆优惠图.png" alt="">
                <div class="sekuai">
                    <div class="title">国庆特惠</div>
                    <p class="price">7288元/套</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/情侣图.jpg" alt="">
                <div class="sekuai">
                    <div class="title">情侣特惠</div>
                    <p class="price">5520元/套</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/闺蜜套餐图.png" alt="">
                <div class="sekuai">
                    <div class="title">闺密套餐</div>
                    <p class="price">6250元/套</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/红框.png" alt="">
                <div class="sekuai">
                    <div class="title">个人福利</div>
                    <p class="price">3230元/套</p>
                </div>
            </div>
        </div>
        <div class="shuxian"></div>
        <div class="diyi"></div>
        <div class="dier"></div>
        <div class="disan"></div>
        <div class="disi"></div>
    </div>
    <!-- 关于我们网页 -->
    <div class="about">
        <div class="title">
            <div class="ename">
                <div class="line1"></div>
                About us
                <div class="line2"></div>
            </div>
            <div class="cname">关于我们</div>
        </div>
        <div class="logo">
            <img src="img/摄影资源.png" alt="">
        </div>
        <div class="des">
            <div class="one">
                <img src="img/Camera-icon.png" alt="">
                <div class="text">
                    2014 年 成 立 于 郑 州，是 郑 州 知 名 一 线 品 牌 旅 拍 摄 影 工 作。
                </div>
            </div>
            <div class="one">
                <img src="img/Nature-icon.png" alt="">
                <div class="text">
                    作 品 多 次 被 今 日 人 像和 人 像 摄 影 等 知 名 行 内 杂 志 推 荐
                </div>
            </div>
            <div class="one">
                <img src="img/world-icon.png" alt="">
                <div class="text">
                    我 们 的 拍 摄 方 式 更 像 是 一 天 旅 行，风 景 与 光 影，只是 为 了 见证 情 感
                </div>
            </div>
            <div class="four">
                <img src="img/Prize-icon.png" alt="">
                <div class="text">
                    时 尚 会 消 逝，影 像 会 长 存，我 们 让 每 一 张 照 片 充 满 幸 福 的 温 度。
                </div>
            </div>
        </div>
    </div>
    <!-- 关于我们手机 -->
    <div class="about-m">
        <div class="title">
            <div class="ename">
                <div class="line1 line"></div>
                <p> About us</p>
                <div class="line2 line"></div>
            </div>
            <h3 class="cname">关于我们</h3>
        </div>
        <div class="des">
            <div class="one">
                <img src="img/Camera-icon.png" alt="">
                <div class="text">
                    2014 年 成 立 于 郑 州，是 郑 州 知 名 一 线 品 牌 旅 拍 摄 影 工 作。
                </div>
            </div>
            <div class="one">
                <img src="img/Nature-icon.png" alt="">
                <div class="text">
                    作 品 多 次 被 今 日 人 像和 人 像 摄 影 等 知 名 行 内 杂 志 推 荐
                </div>
            </div>
            <div class="one">
                <img src="img/world-icon.png" alt="">
                <div class="text">
                    我 们 的 拍 摄 方 式 更 像 是 一 天 旅 行，风 景 与 光 影，只是 为 了 见证 情 感
                </div>
            </div>
            <div class="one">
                <img src="img/Prize-icon.png" alt="">
                <div class="text">
                    时 尚 会 消 逝，影 像 会 长 存，我 们 让 每 一 张 照 片 充 满 幸 福 的 温 度。
                </div>
            </div>
        </div>
        <div class="mask"></div>
    </div>
    <!-- 约拍流程网页 -->
    <div class="medical">
        <div class="title">
            <div class="ename">
                <div class="line1"></div>
                Medical equipment
                <div class="line2"></div>
            </div>
            <div class="cname">约拍流程</div>
        </div>
        <div class="liucheng">
            <div class="one">
                <div class="shuidi">
                    <p>1</p>
                </div>
                <div class="fangkuang">
                    <h2>前期沟通</h2>
                    <p>确定时间地点及相关事项</p>
                </div>
            </div>
            <div class="one">
                <div class="shuidi">
                    <p>2</p>
                </div>
                <div class="fangkuang">
                    <h2>签约拍摄</h2>
                    <p>签订拍摄协议，预付<br>
                        30%款项</p>
                </div>
            </div>
            <div class="one three">
                <div class="shuidi">
                    <p>3</p>
                </div>
                <div class="fangkuang">
                    <h2>拍摄</h2>
                    <p>指派摄影师拍摄，拍摄<br>
                        完毕后支付4%款项</p>
                </div>
            </div>
            <div class="one">
                <div class="shuidi">
                    <p>4</p>
                </div>
                <div class="fangkuang">
                    <h2>选片</h2>
                    <p>客户挑选拍摄的原片，<br>
                        支付剩余30%款项</p>
                </div>
            </div>
            <div class="one two">
                <div class="shuidi">
                    <p>5</p>
                </div>
                <div class="fangkuang">
                    <h2>精修返图</h2>
                    <p>后期精修挑选的原片，<br>
                        交付图片</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 约拍流程手机 -->
    <div class="medical-m">
        <div class="title">
            <div class="ename">
                <div class="line1 line"></div>
                Medical equipment
                <div class="line2 line"></div>
            </div>
            <div class="cname">约拍流程</div>
        </div>
        <div class="show">
            <div class="liucheng">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="one">
                                <div class="shuidi">
                                    <p>1</p>
                                </div>
                                <div class="fangkuang">
                                    <h2>前期沟通</h2>
                                    <p>确定拍摄的时间地点<br> 及相关事项</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="one">
                                <div class="shuidi">
                                    <p>2</p>
                                </div>
                                <div class="fangkuang">
                                    <h2>签约拍摄</h2>
                                    <p>签订拍摄协议，预付<br>
                                        30%款项</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="one three">
                                <div class="shuidi">
                                    <p>3</p>
                                </div>
                                <div class="fangkuang">
                                    <h2>拍摄</h2>
                                    <p>指派摄影师拍摄，拍摄<br>
                                        完毕后支付4%款项</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="one">
                                <div class="shuidi">
                                    <p>4</p>
                                </div>
                                <div class="fangkuang">
                                    <h2>选片</h2>
                                    <p>客户挑选拍摄的原片，<br>
                                        支付剩余30%款项</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="one two">
                                <div class="shuidi">
                                    <p>5</p>
                                </div>
                                <div class="fangkuang">
                                    <h2>精修返图</h2>
                                    <p>后期精修挑选的原片，<br>
                                        交付图片</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <!-- <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> -->
                </div>
            </div>
        </div>

    </div>
    <!-- 公司信息网页 -->
    <div class="infor">
        <div class="office">
            郑州镜界摄影服务工作室
            <img src="img/qq weixin.png" alt="">
        </div>
        <div class="adress">
            地址：郑州市郑东新区绿地中心6号楼<br>
            服务热线：037-7981788 <br>
            邮编：456333 <br>
        </div>
        <div class="tele">
            手机：18236988754 <br>
            邮箱：912754544@qq.com <br>
            Q Q：912754544 <br>
        </div>
        <div class="line1"></div>
        <div class="line2"></div>
    </div>
    <!-- 公司信息手机 -->
    <div class="infor-m">
        <div class="office">
            <p>郑州镜界摄影服务工作室</p>
            <img src="img/qq weixin.png" alt="">
        </div>
        <div class="adress">
            地址：郑州市郑东新区绿地中心6号楼<br>
            服务热线：037-7981788 <br>
            邮编：456333 <br>
        </div>
        <div class="tele">
            手机：18236988754 <br>
            邮箱：912754544@qq.com <br>
            Q Q：912754544 <br>
        </div>
        <div class="line1"></div>
        <div class="line2"></div>
    </div>
    <!-- 底部信息网页 -->
    <div class="footer">
        Copyright ©2010 ls1001.com, All rights reserved. 镜界传媒艺术有限公司 豫ICP备11028596号
    </div>
    <!-- 底部信息手机 -->
    <div class="footer-m">
        Copyright ©2010 ls1001.com, All rights reserved. <br> 镜界传媒艺术有限公司 豫ICP备11028596号
    </div>

    <script src="./jquery.js"></script>
    <script src="./layui-v2.5.6/layui/layui.all.js"></script>
    <script src="./swiper/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });





        // layui轮播
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1',
                width: '375px',
                height: '251px',
                arrow: 'none',
                anim: 'fade',
                indicator: "none"
            });
        });
        // layui轮播
        layui.use('carousel', function () {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test2',
                width: '100%',
                height: '651px',
                arrow: 'none',
                anim: 'fade',
                indicator: "none"
            });
        });
        // 顶部右上角
        var click = false
        $('.header-m .icon').click(function () {
            click = !click;
            if (click) {
                $('.header-m').css({
                    'background': 'rgba(0,0,0,1)'
                })
                $(".local").css({
                    'height': '313px'
                })
                $('.show').slideDown('normal');

            } else {
                $('.header-m').css({
                    'background': 'rgba(0,0,0,0)'
                })
                $(".local").css({
                    'height': '60px'
                })
                $('.show').slideUp('normal');

            }
            $(this).toggleClass('act')
        })
        // 作品展示区域点击图片显示遮罩层

        $(".works-item").on('click', '.item', function () {
            if ($(this).children('.zhezhao').css('opacity') == '1') {
                $(this).children('.zhezhao').css('opacity', 0)
            } else {
                $(this).children('.zhezhao').css('opacity', 1)
            }
        })
        // 优惠区域点击
        $('.imgtotal').on('click', '.item', function () {
            if ($(this).children('.sekuai').css('backgroundColor') != 'rgb(33, 33, 33)') {
                $(this).css({
                    'border': '1px solid black',
                })
                $(this).children('.sekuai').css({
                    'background': '#212121',
                    'color': '#fff'
                })
            } else {
                $(this).css({
                    'border': '1px solid #dd1717'
                })
                $(this).children('.sekuai').css({
                    'background': '#dd1717',
                    'color': '#fff'
                })
            }

        })

        // 约拍点击切换
        var num = 0
        $(".btn .right").click(function () {

            if (num == 0) {
                return
            } else {
                $('.acte').removeClass('acte')
                $(this).addClass('acte')
                num--
                $('.liucheng').css({
                    'left': -num * 181
                })
            }
        })
        $(".btn .left").click(function () {

            if (num == 4) {
                return
            } else {
                $('.acte').removeClass('acte')
                $(this).addClass('acte')
                num++
                $('.liucheng').css({
                    'left': -num * 181
                })
            }
        })
    </script>
</body>

</html>